<template>
  <div class="card table-search">
    <Grid ref="gridRef"
          :searchCol="searchCol"
          :collapsedRows="1" :gap="[20, 0]">

      <GridItem v-for="item in searchParamForm" :key="item.label">
        <!--input-->
        <el-form-item v-if="item.searchType === 'input'" :label="item.label">
          <el-input clearable :disabled="item.disabled" v-model="item.value" :placeholder="'请输入'+item.label"/>
        </el-form-item>
      </GridItem>
      <!--        空白的item-->
      <GridItem v-for="_ in blankItem" :key="_"></GridItem>

      <GridItem>
        <div class="operation">
          <el-button type="primary" :icon="Search" @click="getTableList"> 搜索</el-button>
          <el-button :icon="Delete" @click="_reset"> 重置</el-button>
          <el-button v-if="showCollapse" type="primary" link class="search-isOpen" @click="collapsed = !collapsed">
            {{ collapsed ? "展开" : "合并" }}
            <el-icon class="el-icon--right">
              <component :is="collapsed ? ArrowDown : ArrowUp"></component>
            </el-icon>
          </el-button>
        </div>
      </GridItem>

    </Grid>
  </div>
</template>

<script setup>
import {computed, inject, provide, onActivated, onDeactivated, onMounted, onUnmounted, ref, watch} from "vue";
import {Delete, Search, ArrowDown, ArrowUp} from "@element-plus/icons-vue";
import Grid from "./Grid.vue";
import GridItem from "./GridItem.vue";


//columns
const SearchType =
    "input"
    | "input-number"
    | "select"
    | "select-v2"
    | "tree-select"
    | "cascader"
    | "date-picker"
    | "time-picker"
    | "time-select"
    | "switch"
    | "slider";

const props = defineProps({
  searchColumns: {
    type: Array,
    default: []
  },
  searchParam: {
    type: Object,
    default: {}
  }
})


const emit = defineEmits(["getTableList", "update:searchParam"]);

const searchCol = {xs: 1, sm: 2, md: 2, lg: 3, xl: 4}
// 判断是否显示 展开/合并 按钮
const showCollapse = ref(true)
// 是否默认折叠搜索项
const collapsed = ref(true);
// 折叠后，显示的行数
const collapsedRows = ref(1)
// 空白的Item 数量
const blankItem = ref(1)
// 搜索的参数
const searchParamForm = ref([])


const getTableList = () => {
  emit("getTableList")
}

// 重置参数
const reset = async () => {
  searchParamForm.value = [];
  props.searchColumns.forEach(item => {
    if (item["default"]) {
      searchParamForm.value.push({...item, ...{value: item["default"]}})
    } else {
      searchParamForm.value.push({...item, ...{value: ""}})
    }
  })
}
// 搜索参数更改时，更新父组件的搜索参数
watch(() => (searchParamForm.value.map(item => item.value)), () => {
  let searchParamArgs = {};
  searchParamForm.value.forEach(item => {
    if (item.value !== "") {
      searchParamArgs[item.field] = item.value
    }
  })
  emit("update:searchParam", searchParamArgs)
})

onMounted(() => {
  reset();
})

// 点击重置按钮
const _reset = () => {
  reset().then(() => {
    getTableList();
  })
}


let breakPoint = ref("xl");

provide('breakPoint', breakPoint)

onMounted(() => {
  resize({target: {innerWidth: window.innerWidth}});
  window.addEventListener("resize", resize);
});
onActivated(() => {
  resize({target: {innerWidth: window.innerWidth}});
  window.addEventListener("resize", resize);
});
onUnmounted(() => {
  window.removeEventListener("resize", resize);
});
onDeactivated(() => {
  window.removeEventListener("resize", resize);
});


// 监听屏幕变化
const resize = (e) => {
  let width = (e.target).innerWidth;
  switch (!!width) {
    case width < 768:
      breakPoint.value = "xs";
      break;
    case width >= 768 && width < 992:
      breakPoint.value = "sm";
      break;
    case width >= 992 && width < 1200:
      breakPoint.value = "md";
      break;
    case width >= 1200 && width < 1920:
      breakPoint.value = "lg";
      break;
    case width >= 1920:
      breakPoint.value = "xl";
      break;
  }

  countBlankItem()
};

// 计算空白的item
const countBlankItem = () => {

  if (collapsed) {

  }
  let colNum = searchCol[breakPoint.value]
  if (colNum === 1) {
    blankItem.value = 0
  }
  if (colNum !== 1) {
    blankItem.value = colNum - props.searchColumns.length % colNum - 1
  }
}


</script>

<style scoped lang="scss">

</style>
